<template>
  <div>
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >学生管理</div>
    <div class="content" style="display:flex;flex-direction:column">
      <div style="margin:10px auto;">
        <div style="display:flex;flex-direction:row">
          <el-input
            type="text"
            style="width:300px;height:40px"
            placeholder="输入搜索内容"
            v-model="params.queryParams"
            @change="getAllStudentPersonInfo"
            autofocus
            clearable
          ></el-input>
          <div
            style="font-weigth:bold;font-size:23px;margin-left:20px;background-color:skyblue;border:1px solid black;border-radius:10%;width:50px;heigth:25px"
            @click="getAllStudentPersonInfo"
          >搜索</div>
        </div>
      </div>
      <div style="margin:10px">
        <el-button
          type="text"
          @click="centerDialogVisible = true"
          style="color:black;border:1px solid black;width:100px;background:skyblue;font-size:15px;float:right;"
        >添加</el-button>
        <el-dialog title="所有项为必填项" :visible.sync="centerDialogVisible" width="40%" center>
          <span style="margin-left:150px;display:flex;flex-direction:column;">
            <span>
              学号:
              <input v-model="addInfo.code" id="addInp1"  type="number"/>
              <br />
              <br />
              <span></span>姓名:
              <input v-model="addInfo.name" id="addInp2"  type="text"/>
              <br />
              <br />
            </span>
            <span>
              身份:
              <!-- <input v-model="addInfo.identity" id="addInp3" /> -->
              <el-radio v-model="addInfo.identity" label="学生" >学生</el-radio>
                    <el-radio v-model="addInfo.identity" label="教师" >教师</el-radio>
              <br />
              <br />
            </span>
            <span>
              班级:
              <input v-model="addInfo.grade" id="addInp4"  type="text"/>
              <br />
              <br />
            </span>
            <span>
              性别:
              <!-- <input v-model="addInfo.sex" id="addInp5" /> -->
              <el-radio v-model="addInfo.sex" label="男" >男</el-radio>
                    <el-radio v-model="addInfo.sex" label="女" >女</el-radio>
              <br />
              <br />
            </span>
            <span>
              年龄:
              <input v-model="addInfo.age" id="addInp6"  type="number"/>
              <br />
              <br />
            </span>
            <span>
              电话:
              <input v-model="addInfo.del" id="addInp7"  type="number"/>
              <br />
              <br />
            </span>
            <span>
              生源地:
              <input v-model="addInfo.address" id="addInp8"  type="text"/>
              <br />
              <br />
            </span>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button @click="add">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div style="margin-top:10px">
        <table style="width:100%;border-collapse:collapse;text-algin:center;" border="1px">
          <tr>
            <th>学号</th>
            <th>名字</th>
            <th>身份</th>
            <th>班级</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>生源地</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in allStudentpersonInfo1" :key="index">
            <th>{{item.code}}</th>
            <th>{{item.name}}</th>
            <th>{{item.identity}}</th>
            <th>{{item.grade}}</th>
            <th>{{item.sex}}</th>
            <th>{{item.age}}</th>
            <th>{{item.del}}</th>
            <th>{{item.address}}</th>
            <th>
              <el-button
                type="text"
                @click="updataItem(item)"
                style="color:black;border:1px solid black;width:30%;background:skyblue;font-size:15px"
              >修改</el-button>
              <el-dialog
                title="所有项都为必填项"
                :visible.sync="centerDialogVisible1"
                width="40%"
                center
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
              >
                <span style="margin-left:150px;display:flex;flex-direction:column;">
                  <span>
                    姓名:(修改前:{{updataItemInfo.name}})
                    <input
                      v-model="upDateInfo.name"
                      type="text"
                      id="inp1"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    身份:(修改前:{{updataItemInfo.identity}})
                    <!-- <input
                      v-model="upDateInfo.identity"
                      id="inp2"
                    /> -->
                    <el-radio v-model="upDateInfo.identity" label="学生" >学生</el-radio>
                    <el-radio v-model="upDateInfo.identity" label="教师" >教师</el-radio>
                    <br />
                    <br />
                  </span>
                  <span>
                    班级:(修改前:{{updataItemInfo.grade}})
                    <input v-model="upDateInfo.grade" id="inp3"  type="text"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    性别:(修改前:{{updataItemInfo.sex}})
                    <!-- <input v-model="upDateInfo.sex" id="inp4" /> -->
                    <el-radio v-model="upDateInfo.sex" label="男" >男</el-radio>
                    <el-radio v-model="upDateInfo.sex" label="女" >女</el-radio>
                    <br />
                    <br />
                  </span>
                  <span>
                    年龄:(修改前:{{updataItemInfo.age}})
                    <input v-model="upDateInfo.age" id="inp5"  type="number"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    电话:(修改前:{{updataItemInfo.del}})
                    <input v-model="upDateInfo.del" id="inp6"  type="number"/>
                    <br />
                    <br />
                  </span>
                  <span>
                    生源地:(修改前:{{updataItemInfo.address}})
                    <input
                      v-model="upDateInfo.address"
                      id="inp7"
                       type="text"
                    />
                    <br />
                    <br />
                  </span>
                  <span>学号:(学号不可修改:{{updataItemInfo.code}})</span>
                </span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                  <el-button @click="update">确 定</el-button>
                </span>
              </el-dialog>
              <label>--</label>
              <el-button
                type="text"
                @click="deleteItem(item)"
                style="color:black;border:1px solid black;width:30%;background:red;font-size:15px"
              >删除</el-button>
              <el-dialog title="提示" :visible.sync="centerDialogVisible2" width="40%" center>
                <div>
                  确认删除的学号:
                  <input v-model="deleteInfo.code" type="number" id="dinp1" />
                </div>
                <div slot="footer">
                  <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                  <el-button @click="deleteStudentInfo">确 定</el-button>
                </div>
              </el-dialog>
            </th>
          </tr>
        </table>
      </div>
    </div>
    <div class="block" style="float:right;margin:20px">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
        :current-page.sync="pagination.page_index"
        :page-sizes="pagination.page_sizes"
        :page-size="pagination.page_size"
        :layout="pagination.layout"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "personinfoAll",
  mounted() {
    this.getAllStudentPersonInfo();
  },
  data() {
    return {
      pagination: {
        page_size: null,
        page_index: null,
        total:null,
        page_sizes:[5,10,20],
        layout:"total, sizes, prev, pager, next, jumper"
      },
      params: {
        queryParams: ""
      },
      loading: false,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      allStudentpersonInfo: [],
      allStudentpersonInfo1: [],
      updataItemInfo: {},
      upDateInfo: {
        name: "",
        identity: "",
        age: "",
        grade: "",
        del: "",
        address: "",
        sex: "",
        code: ""
      },
      addInfo: {
        code: "",
        name: "",
        identity: "",
        age: "",
        grade: "",
        del: "",
        address: "",
        sex: ""
      },
      deleteItemInfo: {
        code: ""
      },
      deleteInfo: {
        code: ""
      }
    };
  },
  methods: {
    async getAllStudentPersonInfo() {
      await this.$API
        .call("/getAllStudentInfo", "get", this.params, "")
        .then(res => {
          this.allStudentpersonInfo = res.data;
          this.pagination.total = this.allStudentpersonInfo.length;
          this.pagination.page_index = 1;
          this.pagination.page_size = 5;
          this.allStudentpersonInfo1 = this.allStudentpersonInfo.filter(
            (item, index) => {
              return index < this.pagination.page_size;
            }
          );
        });
    },
    handleSizeChange(page_size){
      this.pagination.page_index = 1;
      this.pagination.page_size = page_size;
      this.allStudentpersonInfo1 = this.allStudentpersonInfo.filter((item,index)=>{
        return index < this.pagination.page_size
      }) 
    },
    handleCurrentChange(page){
      //获取去往页数的第一条数据
      let index = this.pagination.page_size * (page-1);
      let nums = this.pagination.page_size * page;
      let tableData = [];
      for (let i = index; i < nums; i++) {
        if(this.allStudentpersonInfo[i]){
          tableData.push(this.allStudentpersonInfo[i])
          this.allStudentpersonInfo1 = tableData
        }
      }
    },
    updataItem(item) {
      this.updataItemInfo = {
        name: item.name,
        identity: item.identity,
        grade: item.grade,
        sex: item.sex,
        age: item.age,
        del: item.del,
        address: item.address,
        code: item.code
      };
      this.upDateInfo.code = item.code;
      this.centerDialogVisible1 = true;
    },
    deleteItem(item) {
      this.deleteItemInfo = {
        code: item.code
      };
      this.centerDialogVisible2 = true;
    },
    async update() {
      this.loading = true;
      const inp1 = document.getElementById("inp1");
      // const inp2 = document.getElementById("inp2");
      const inp3 = document.getElementById("inp3");
      // const inp4 = document.getElementById("inp4");
      const inp5 = document.getElementById("inp5");
      const inp6 = document.getElementById("inp6");
      const inp7 = document.getElementById("inp7");
      if (
        this.upDateInfo.identity &&
        inp3.value &&
        this.upDateInfo.sex &&
        inp5.value &&
        inp6.value &&
        inp7.value &&
        inp1.value != ""
      ) {
        await this.$API
          .call("/upDateStudentInfo", "post", "", this.upDateInfo)
          .then(res => {
            if (res.data != "true") {
              alert("修改失败"),
                (inp1.value = ""),
                (this.upDateInfo.identity = ""),
                (inp3.value = ""),
                (this.upDateInfo.sex = ""),
                (inp5.value = ""),
                (inp6.value = ""),
                (inp7.value = ""),
                (this.loading = false);
            } else {
              alert("修改成功"), (this.loading = false);
              window.location.reload(true);
            }
          })
          .catch(() => alert("修改失败,请联系管理员"));
      } else {
        alert("必填字段不能为空!");
        this.loading = false;
      }
    },
    async add() {
      const addInp1 = document.getElementById("addInp1");
      const addInp2 = document.getElementById("addInp2");
      // const addInp3 = document.getElementById("addInp3");
      const addInp4 = document.getElementById("addInp4");
      // const addInp5 = document.getElementById("addInp5");
      const addInp6 = document.getElementById("addInp6");
      const addInp7 = document.getElementById("addInp7");
      const addInp8 = document.getElementById("addInp8");
      if (
        addInp1.value &&
        addInp2.value &&
        this.addInfo.identity &&
        addInp4.value &&
        this.addInfo.sex &&
        addInp6.value &&
        addInp7.value &&
        addInp8.value != ""
      ) {
        await this.$API
          .call("/addStudent", "post", "", this.addInfo)
          .then(res => {
            if (res.data.msg == "添加失败") {
              alert(res.data.msg);
              (addInp1.value = ""),
                (addInp2.value = ""),
                (this.addInfo.identity = ""),
                (addInp4.value = ""),
                (this.addInfo.sex = ""),
                (addInp6.value = ""),
                (addInp7.value = ""),
                (addInp8.value = "");
            } else if (res.data.msg == "添加成功") {
              alert(res.data.msg), window.location.reload();
            }
          })
          .catch(() => {
            alert("该学号已存在"), (addInp1.value = "");
          });
      } else {
        alert("必填字段不能为空");
      }
    },
    async deleteStudentInfo() {
      const dinp1 = document.getElementById("dinp1");
      if (dinp1.value == "") {
        alert("删除学号不能为空");
      } else if (dinp1.value != this.deleteItemInfo.code) {
        alert("删除学号不一致");
      } else {
        await this.$API
          .call("/deleteStudentInfo", "post", "", this.deleteInfo)
          .then(res => {
            if (res.data == "删除成功") {
              alert(res.data);
              window.location.reload();
            } else {
              alert(res.data);
              dinp1.value = "";
            }
          });
      }
    }
  }
};
</script>>
  
<style lang='less' scoped>
</style>